<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社团成员管理</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: auto; padding: 20px; }
        h1 { text-align: center; }
        #member-form { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
        label { display: block; margin-top: 10px; }
        input[type="text"], input[type="email"] { width: 100%; padding: 5px; margin-top: 5px; margin-bottom: 10px; }
        button { margin-right: 10px; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入全局样式 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 导航栏 HTML 放在每个页面顶部 -->
<nav class="navbar">
    <a href="index.html">社团管理</a>
    <a href="members.html">成员管理</a>
    <a href="memberships.html">成员关系管理</a>
    <a href="activities.html">活动管理</a>
    <a href="departments.html">部门管理</a>
</nav>

<h1>社团成员管理</h1>

<!-- 新增/编辑成员的表单 -->
<div id="member-form">
    <h2 id="form-title">新增成员</h2>
    <input type="hidden" id="member-id">
    <label for="member-name">姓名:</label>
    <input type="text" id="member-name" required>
    <label for="member-email">邮箱:</label>
    <input type="email" id="member-email" required>
    <label for="member-phone">电话:</label>
    <input type="text" id="member-phone">
    <button onclick="handleSubmit()">提交</button>
    <button onclick="clearForm()">取消</button>
</div>

<!-- 成员列表 -->
<h2>成员列表</h2>
<table id="member-table" border="1" cellspacing="0" cellpadding="8">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="member-table-body"></tbody>
</table>

<script>
    const api = axios.create({
        baseURL: 'http://localhost:8080', // 替换为实际后端 API URL
        headers: { 'Content-Type': 'application/json' }
    });

    // 页面加载时获取成员列表
    document.addEventListener('DOMContentLoaded', fetchMembers);

    function fetchMembers() {
        api.get('/members')
            .then(response => {
                const members = response.data.data;
                const tbody = document.getElementById('member-table-body');
                tbody.innerHTML = '';

                members.forEach(member => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
              <td>${member.memberId}</td>
              <td>${member.name}</td>
              <td>${member.email}</td>
              <td>${member.phone}</td>
              <td>
                <button onclick="editMember(${member.memberId})">编辑</button>
                <button onclick="deleteMember(${member.memberId})">删除</button>
              </td>
            `;
                    tbody.appendChild(row);
                });
            })
            .catch(error => console.error('获取成员列表失败', error));
    }

    function handleSubmit() {
        const memberId = document.getElementById('member-id').value;
        const name = document.getElementById('member-name').value;
        const email = document.getElementById('member-email').value;
        const phone = document.getElementById('member-phone').value;
        const member = { name, email, phone };

        if (memberId) {
            api.put(`/members/${memberId}`, member)
                .then(() => {
                    alert('成员更新成功');
                    fetchMembers();
                    clearForm();
                })
                .catch(error => console.error('更新成员失败', error));
        } else {
            api.post('/members', member)
                .then(() => {
                    alert('成员创建成功');
                    fetchMembers();
                    clearForm();
                })
                .catch(error => console.error('创建成员失败', error));
        }
    }

    function editMember(memberId) {
        api.get(`/members/${memberId}`)
            .then(response => {
                const member = response.data.data;
                document.getElementById('member-id').value = member.memberId;
                document.getElementById('member-name').value = member.name;
                document.getElementById('member-email').value = member.email;
                document.getElementById('member-phone').value = member.phone;
                document.getElementById('form-title').innerText = '编辑成员';
            })
            .catch(error => console.error('获取成员失败', error));
    }

    function deleteMember(memberId) {
        if (confirm('确定要删除该成员吗？')) {
            api.delete(`/members/${memberId}`)
                .then(() => {
                    alert('成员删除成功');
                    fetchMembers();
                })
                .catch(error => console.error('删除成员失败', error));
        }
    }

    function clearForm() {
        document.getElementById('member-id').value = '';
        document.getElementById('member-name').value = '';
        document.getElementById('member-email').value = '';
        document.getElementById('member-phone').value = '';
        document.getElementById('form-title').innerText = '新增成员';
    }
</script>
</body>
</html>